import React, { useEffect } from 'react';
import { createPortal } from 'react-dom';
import styles from './Footer.less';
import { NavLink } from 'umi';
import { Icon } from '@/design';
import SVGHome from './Svg/Home';
import SVGDiscover from './Svg/Discover';
import SVGSocial from './Svg/Social';
import SVGMine from './Svg/Mine';

const Footer: React.FC = props => {
  return createPortal(
    <>
      {/* <div className={styles.footer_hidden}></div> */}
      <div className={styles.footer_main}>
        <NavLink exact className={styles.item} to="/">
          <SVGHome />
          <span>優惠</span>
        </NavLink>
        <NavLink exact className={styles.item} to="/discover">
          <SVGDiscover />
          <span>發現</span>
        </NavLink>
        <NavLink exact className={styles.item} to="/social">
          <SVGSocial />
          <span>百草園</span>
        </NavLink>
        <NavLink exact className={styles.item} to="/mine">
          <SVGMine />
          <span>我的</span>
        </NavLink>
      </div>
    </>,
    document.body,
  );
};

export default Footer;
